<template>
    <view style="height: 100%">
        <top title="我的" color="#fff" bgc="transparent" img="2" position="absolute" backurl="/pages/my/my"></top>
        <image src="https://wx.xtwaixie.com/img/my-bg1.png" class="home-bg h200"></image>
        <view class="pr mt5">
            <view class="my-numinfo-box mt10 df ac pd1520 otherBackground">
                <image class="img50" src="https://wx.xtwaixie.com/img/y1.png"></image>
                <view class="f1 ml12" hover-class="none" :hover-stop-propagation="false">
                    <h2 class="f18 cf f600 db">会员权益</h2>
                    <p class="db mt3 f12 cf5 op6 vip-tips">1.会员可直接查看并联系订单大厅内所有订单的采购商，无任何限制。</p>
                    <!-- <p class="db mt3 f12 cf5 op6 vip-tips">2.无限积分，积分低于1000时，系统会自动续充。</p> -->
                    <p class="db mt3 f12 cf5 op6 vip-tips">2.后续无其他费用。</p>
                </view>
            </view>
			<!-- <view class="timeClock">
				<view class="timeClockTitle">
					调价通知
				</view>
				<view class="timeClockSubTitle" style="">
					自2024年3月1日起，会员价格将调整为:
				</view>
				<view class=""
					style="display: flex;align-items: center;font-size: 34rpx;font-weight: bold;color: rgb(245, 61, 15);width: 460rpx;justify-content: space-between;">
					<view class="">
						5000元/一年
					</view>
					<view class="">
						7500元/两年
					</view>
				</view>
				<view class="" style="display: flex;align-items: center;margin-top: 10rpx;">
					<view class="" style="font-size: 28rpx;font-weight: bold;margin-right: 10rpx;">
						调价倒计时:
					</view>
					<van-count-down :time="time" use-slot @change="onChanges">
						<text class="item">{{ timeData.days }}</text>
						<text class="time">天</text>
						<text class="item">{{ timeData.hours }}</text>
						<text class="time">小时</text>
						<text class="item">{{ timeData.minutes }}</text>
						<text class="time">分</text>
						<text class="item">{{ timeData.seconds }}</text>
						<text class="time">秒</text>
					</van-count-down>
				</view>
			</view> -->	
            <ul class="df fw mt20" style="margin-top: 60rpx;">
                <block v-for="(item, index) in list" :key="index">
                    <li :class="'hy-list df fc sb pr ' + (item.id == act ? 'hy-act' : '')" @tap.native="onAct($event, { i: item.id })" :data-i="item.id">
                        <view class="">
                            <h2 class="f18 c28 f600 db">{{ item.title }}</h2>
                            <p class="c6b f12 mt3 db">{{ item.description }}</p>
                        </view>
                        <p class="f20 cf5 f600">¥{{ item.price }}</p>
                        <image class="hy-sel" src="https://wx.xtwaixie.com/img/hy-sel.png" v-if="item.id == act"></image>
                    </li>
                </block>
            </ul>

            <p class="f14 mt20 cf5 db">*可开具增值税专用发票，付款后请联系客服提供开票资料索取</p>
            <view class="mt25 bgcf h48 df ac pd015 br12" v-if="!payType">
                <p class="f14 c28 f1">支付方式</p>
                <image class="img18" src="https://wx.xtwaixie.com/img/wx.png"></image>
                <p class="ml12 f14 c28">微信支付</p>
            </view>
            <view class="mt25 df ac">
                <van-checkbox :value="is_check" @change="onChange" icon-size="18px">
                    <p class="f14 c28">我已阅读并同意</p>
                </van-checkbox>
                <navigator class="f14 c10" url="/pages/about/about?type=11" hover-class="none" open-type="navigate">《夕腾外协-会员服务条款》</navigator>
            </view>

            <view class="mt30">
                <button class="sub" @tap="onPay" v-if="!payType">确认支付</button>
                <button class="sub" @tap="onDialog" v-else>联系业务部</button>
            </view>
        </view>

        <view class="bei-box">
            <P class="f12 c6 tc mt5 db">夕腾外协-非标零件采购平台</P>
            <P class="f12 c6 mt5 tc db">2022版权所有 © 夕腾设备（上海）有限公司</P>
            <P class="f12 mt5 c6 df ac jc">
                <image src="https://wx.xtwaixie.com/img/ba.png" class="img16"></image>
                沪公网安备31011502018514号 | 沪ICP备2020029919号
            </P>
        </view>

        <van-popup :show="qrcodeShow" round position="center" closeable @close="onClose">
            <view class="qrcode-img">
                <image  referrerPolicy='no-referrer' :src="base_info.service_qrcode"></image>
                <button class="save-btn" @tap="onSave">保存</button>
            </view>
        </van-popup>
    </view>
</template>

<script>
import top from '@/component/top/top';
import http from '../../utils/http';
export default {
    components: {
        top
    },
    data() {
        return {
            list: [],
            act: '',
            payType: '',
            is_check: '',
            base_info: {
                service_qrcode: ''
            },
            qrcodeShow: false,
			time:0,
			timeData: {
			
			}
        };
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
		this.time = new Date("2024/3/1 00:00:00") - new Date()
        this.getList();
        this.getBase();
        let that = this;
        uni.getSystemInfo({
            success(res) {
                that.setData({
                    payType: res.system.indexOf('iOS') > -1
                });
            }
        });
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {},
    methods: {
		onChanges(e) {
			this.timeData = e.detail
		},
        onChange(event) {
            this.setData({
                is_check: event.detail
            });
        },

        getList() {
            http.request('base/vipList')
                .then((res) => {
                    this.setData({
                        list: res.data
                    });
                })
                .catch((res) => {
                    uni.showToast({
                        title: res.message,
                        icon: 'none'
                    });
                });
        },

        onAct(e, _dataset) {
            /* ---处理dataset begin--- */
            this.handleDataset(e, _dataset);
            /* ---处理dataset end--- */
            let i = e.currentTarget.dataset.i;
            this.setData({
                act: i
            });
        },

        onPay() {
            if (!this.is_check) {
                uni.showToast({
                    title: '请阅读并同意《会员服务条款》',
                    icon: 'none'
                });
                return false;
            }
            let data = {
                vip_id: this.act
            };
            http.request('user/vipRecharge', data)
                .then((res) => {
                    console.log(res);
                    let info = res.data.wechatPay;
                    uni.requestPayment({
                        timeStamp: info.timeStamp,
                        nonceStr: info.nonceStr,
                        package: info.package,
                        signType: info.signType,
                        paySign: info.sign,
                        success: (res) => {
                            uni.showModal({
                                title: '充值成功',
                                content: '恭喜您成为夕腾外协会员供应商',
                                showCancel: false,
                                success(res) {
                                    if (res.confirm) {
                                        uni.navigateBack({
                                            delta: 1
                                        });
                                    }
                                }
                            });
                        },
                        fail: (res) => {
                            console.log(res);
                            uni.showToast({
                                title: '支付失败',
                                icon: 'none'
                            });
                        }
                    });
                })
                .catch((res) => {
                    uni.showToast({
                        title: res.message,
                        icon: 'none'
                    });
                });
        },

        getBase() {
            http.request('base/configData')
                .then((res) => {
                    this.setData({
                        base_info: res.data
                    });
                })
                .catch((res) => {
                    console.log(res);
                });
        },

        onDialog() {
            if (!this.is_check) {
                uni.showToast({
                    title: '请阅读并同意《会员服务条款》',
                    icon: 'none'
                });
                return false;
            }
            //  this.setData({
            // 	 qrcodeShow: true
            //  })
            uni.navigateTo({
                url: 'iosvip'
            });
        },

        onClose() {
            this.setData({
                qrcodeShow: false
            });
        },

        onSave() {
            uni.downloadFile({
                url: this.base_info.service_qrcode,
                success(res) {
                    // 只要服务器有响应数据，就会把响应内容写入文件并进入 success 回调，业务需要自行判断是否下载到了想要的内容
                    if (res.statusCode === 200) {
                        uni.saveImageToPhotosAlbum({
                            filePath: res.tempFilePath,
                            success(res) {
                                uni.showToast({
                                    title: '已保存到相册'
                                });
                            },
                            fail(res) {
                                uni.showToast({
                                    title: '保存图片失败！',
                                    icon: 'none'
                                });
                            }
                        });
                    }
                }
            });
        }
    }
};
</script>
<style>
	.timeClock {
		margin-top: 40rpx;
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.timeClockTitle {
		font-weight: bold;
		font-size: 30rpx;
	}

	.timeClockSubTitle {
		font-size: 28rpx;
	}
	.item{
		color: rgb(245, 61, 15);
		font-size: 32rpx;
		font-weight: bold;
		margin:0 5rpx;
		line-height: 42rpx;
	}
	.time{
		line-height: 42rpx;
		font-size: 30rpx;
		font-weight: bold;
	}
	
	
	page {
	    padding: 0 32rpx 0;
	    box-sizing: border-box;
	    background-color: rgb(247, 248, 252);
	}
	
	.bei-box {
	    width: 100%;
	    position: fixed;
	    bottom: 100rpx;
	    left: 0;
	}
	.qrcode-img {
	    padding: 40rpx;
	}
	.qrcode-img image {
	    height: 400rpx;
	    width: 400rpx;
	}
	.save-btn {
	    width: 200rpx !important;
	    height: 60rpx;
	    line-height: 60rpx;
	    padding: 0;
	    margin: 0 auto !important;
	    background: #1050c7;
	    color: #fff;
	    border-radius: 999rpx;
	    font-size: 28rpx;
	}
	.vip-tips {
	    color: #fff;
	    font-size: 24rpx;
	    opacity: 1;
	}
	
</style>
